import 'package:flutter/material.dart';
import '../data/CustomData.dart';

class SelfGridView extends StatelessWidget {
  List _list = new CustomData().imgList;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SelfGridView网格列表'),
      ),
/*
      // 网格布局
      body: GridView(
        // 网格列表的相关配置项
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          // 一行显示几个 crossAxisCount
          crossAxisCount: 3,
          mainAxisSpacing: 2,
          crossAxisSpacing: 2,
          childAspectRatio: 0.7
        ),
        children: <Widget>[
          Image(image: NetworkImage(_list[0]), fit: BoxFit.cover),
          Image(image: NetworkImage(_list[1]), fit: BoxFit.cover),
          Image(image: NetworkImage(_list[2]), fit: BoxFit.cover),
          Image(image: NetworkImage(_list[3]), fit: BoxFit.cover),
          Image(image: NetworkImage(_list[4]), fit: BoxFit.cover),
          Image(image: NetworkImage(_list[5]), fit: BoxFit.cover),
          Image(image: NetworkImage(_list[6]), fit: BoxFit.cover),
          Image(image: NetworkImage(_list[7]), fit: BoxFit.cover),
          Image(image: NetworkImage(_list[8]), fit: BoxFit.cover),
        ],
      ),
    
*/

/*
    // 固定数量的写法
    body: GridView.count(
      // 表示一行显示几个
      crossAxisCount: 2,
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      childAspectRatio: 0.7,
      children: <Widget>[
        Image(image: NetworkImage(_list[0]), fit: BoxFit.cover),
        Image(image: NetworkImage(_list[1]), fit: BoxFit.cover),
        Image(image: NetworkImage(_list[2]), fit: BoxFit.cover),
        Image(image: NetworkImage(_list[3]), fit: BoxFit.cover),
        Image(image: NetworkImage(_list[4]), fit: BoxFit.cover),
        Image(image: NetworkImage(_list[5]), fit: BoxFit.cover),
        Image(image: NetworkImage(_list[6]), fit: BoxFit.cover),
        Image(image: NetworkImage(_list[7]), fit: BoxFit.cover),
        Image(image: NetworkImage(_list[8]), fit: BoxFit.cover),
      ],
    ),
 */
      // GridView.builder 网格布局的方法，动态创建多个组件item项
      body: GridView.builder(
        // gridDelegate 必填项，表示添加相关配置
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          // 横向排列的个数
          crossAxisCount: 3,
          // 每一项上下的 spacing 间距
          mainAxisSpacing: 2,
          // 每一项的左右间距
          crossAxisSpacing: 2,
          // 每一项的宽高比
          childAspectRatio: 0.7,
        ),
        // 我们每一次遍历数组执行的回掉函数，context上下文, i是每次遍历的索引
        itemBuilder: (BuildContext context, int i) {
          // 返回值一定是一个组件widget，这个代表我们的每一个item项
          return Image(image: NetworkImage(_list[i]), fit: BoxFit.cover);
        },
        // 我们循环的次数
        itemCount: _list.length,
      ),
    );
  }
}
